<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
	<link href="http://www.runoob.com/try/bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" media="screen and (max-width:900px)" href="/assets/stylesheets/style_wap.css" type="text/css" />
	<link rel="stylesheet" media="screen and (min-width:900px)" href="/assets/stylesheets/style_pc.css" type="text/css" />
	<title>会员注册</title>
</head>
<body>
	<!-- 前端嵌套写法，仅供前端使用，首页有完整代码 -->
	<div class="topline" id="J_topline" data-til="会员注册">
			<nav th:replace="hjh/include::menuV"></nav>
	</div>

	<div class="vipreg content">
		<p class="fgtil">会员注册</p>
		<div class="formline" id ="vipreg_div">
			<div class="fline">
				<p class="ado"><span class="ador">*</span>用户名：</p>
				<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" class="J_ctrol ctrol" data-target="nickname" type="text" placeholder="用户名必须唯一" name="username" id="J_nickname">
			</div>
			<div class="fline flineb">
				<p class="ado"><span class="ador">*</span>登录密码：</p>
				<input class="J_ctrol ctrol" data-target="pwd" type="password" placeholder="供该用户首次登录使用" name="password" id="J_pwd">
			</div>
			<div class="fline fwapa">
				<p class="ado"><span class="ador">*</span>选择套餐/会员等级：</p>
				<select class="J_select ctrol ctrolwa ctrol_select" data-target="vip" name="memberLevel" id="select_product_vipreg"  >
					<option  th:each="product,stat:${products}" th:if="${product.memberLevel == 5}"
							 th:value="${product.memberLevel}" th:text="${product.memberDesc}"  th:selected="${stat.index=='0'}" th:attr="data-member-level=${product.memberLevel}" ></option>
				</select>
				<span class="fsp">-</span>
				<select class="J_select ctrol ctrol_select" data-target="taocan" name="productId" id="select_memberLevel_vipreg"  disabled="disabled">
					<option  th:each="product,stat:${products}"
							 th:if="${product.memberLevel == 5}"
							 th:value="${product.id}"
							 th:text="${product.name}" th:selected="${stat.index=='0'}"
					th:attr="data-member-level=${product.memberLevel}" ></option>
				</select>
			</div>
			<input class="J_ctrol ctrol" data-target="reco" type="hidden" placeholder="" id="J_quantity" name="quantity" value="1">
			<!--
			<div class="fline flineb">
				<p class="ado">选择数量：</p>
				<input class="J_ctrol ctrol" data-target="reco" type="text" placeholder="" id="J_quantity" name="quantity" value="1">
			</div>
 			-->
			<div class="fline flineb">
				<p class="ado">推荐人：</p>
				<input class="J_ctrol ctrolwa ctrol" data-target="jiedian"
					   data-provide="typeahead" type="text" placeholder="推荐人"
					   name="recommendUsername" id="J_reco" th:value="${user.username}">
			</div>

			<div class="fline ferra fwapb">
				<p class="ado"><span class="ador">*</span>收货人姓名/手机号/地址：</p>
				<input class="J_ctrol ctrolwa ctrol" data-target="name" type="text" placeholder="收货人姓名" name="receiveName" id="J_name">
				<span class="fsp">-</span>
				<input class="J_ctrol ctrolwa ctrol" data-target="phone" data-type="phone" type="text" placeholder="收货人手机号" name="receiveMobile" id="J_phone">
				<span class="fsp">-</span>
				<input class="J_ctrol ctrol" data-target="adress" type="text" placeholder="收货地址（用于接收订购商品）" name="receiveAddress" id="J_adress">
			</div>

			<div class="fline flineb">
				<p class="ado"><span class="ador">*</span>手机号码：</p>
				<input class="J_ctrol ctrol" data-target="phonea" data-type="phone" type="text" placeholder="" name="mobile" id="J_phonea">
			</div>

			<div class="fline flineb">
				<p class="ado"><span class="ador">*</span>会员真实姓名：</p>
				<input class="J_ctrol ctrol" data-target="realname" type="text" placeholder="" name="name" id="J_realname">
			</div>

			<div class="fline flineb">
				<p class="ado">身份证号：</p>
				<input class="J_ctrol ctrol" data-target="ids" type="text" placeholder="" name="cardNumber" id="J_ids">
			</div>

			<div class="fline flineb">
				<p class="ado">联系地址：</p>
				<input class="J_ctrol ctrol" data-target="contact" type="text" placeholder="" name="liveAddress" id="J_contact">
			</div>

			<div class="fline linea">
				<a href="javascript:;" class="btn fbtm" id="J_btn">确认添加</a>
			</div>
		</div>
	</div>
	<nav th:replace="hjh/include::bottomV"></nav>
	<script language="javascript" type="text/javascript" src="/assets/javascript/jquery-2.1.4.min.js"></script>
	<script language="javascript" type="text/javascript" src="/assets/javascript/func.js"></script>
	<script language="javascript" type="text/javascript" src="/assets/javascript/bootstrap-typeahead.js"></script>
	<script type="text/javascript">
		$(function(){
            $.fn.typeahead.Constructor.prototype.blur = function () {
                var that = this;
                setTimeout(function () { that.hide() }, 250);
            };
            $("#J_jiedian").typeahead({
			   insertPoint:$("#J_jiedian"),
                source: function (query, process) {
                    $.get('/search_user?keyword=' + query + "&findChildren=1", "", function (data) {
                        process(data);
                    })
                }
            });

            $("#J_reco").typeahead({
                insertPoint:$("#J_reco"),
                source: function (query, process) {
                    $.get('/search_user?keyword=' + query + "&findChildren=1", "", function (data) {
                        process(data);
                    })
                }
            });

			$('.J_ctrol').blur(function(){
				var self = $(this),
					val = self.val().trim(),
					type = self.attr('data-type')||'text',
					tar = self.attr('data-target'),
					isright = true;

				if(type=="phone"){
					var regphone = /^[1][0-9]{10}$/ig;
			        if(!regphone.test(val)){
			            return;
			        };
				};
				if(val){
					self.val(val);
					data[tar] = val; // 数据填充
				};
			});
			$('.J_select').change(function(){
				var self = $(this),
					val = self.val(),
					tar = self.attr('data-target');
				if(val){
					self.val(val);
					data[tar] = val; // 数据填充
				};
			});

			var J_btn = $('#J_btn'),
				isajax = false, // 设置开关
				data = {"taocan":1,"vip":1};


			J_btn.click(function(){
				if(isajax){return false;}

				data = serialize($("#vipreg_div"),"name")

				if(!data.username){
					errormsg($('#J_nickname'),'请输入用户名');
					return;
				};
				if(!data.password){
					errormsg($('#J_pwd'),'请输入登录密码');
					return;
				};
				if(!data.mobile){
                    errormsg($('#J_phonea'),'请输入手机号码');
                    return;
				}
				if(!data.name){
					errormsg($('#J_realname'),'请输入会员真实姓名');
					return;
				};

                if(!data.receiveName){
                    errormsg($('#J_name'),'请输入收货人姓名');
                    return;
                };

				if(!data.receiveMobile){
					errormsg($('#J_phone'),'请输入收货人手机号');
					return;
				};
				if(!data.receiveAddress){
					errormsg($('#J_adress'),'请输入收货人收货地址');
					return;
				};
				isajax = true;
				J_btn.html("正在提交···");
				$.ajax({
					type: "POST",
					url: "/member/save",
					data: JSON.stringify(data),
					dataType: "json",
					contentType:"application/json;charset=utf8",
					success: function(res){
						if(res.code==0){
							// 提交成功
							alert('提交成功')
                            window.location.href = '/member_list'; // 跳转
						}else{
                            alert('提交失败，'+res.msg)
							J_btn.html("提交");
						};
					},
					complete:function(){
						isajax = false;
					}
				});

			});

			$("#select_product_vipreg").change(function(){
                if($(this).val()){
                    var memberLevel = $(this).find('option:selected').data("memberLevel");
                    $("#select_memberLevel_vipreg").val(memberLevel);
                }
			})
		});

		function serialize(component,attr){
		    var obj = new Object();
		    $(component).find("["+attr+"]").each(function(){
		        var name = $(this).attr(attr);
		        var val = $(this).val();
		        obj[name]=val;
			})
			return obj;
		}
	</script>
</body>
</html>
